<template>
  <div class="parent">
    <div class="operation">
      <div>
        <img src="../../assets/images/login_logo.png" alt="" class="login-logo">
      </div>
      <div class="user-login">
        <p class="user-login-title">User Login</p>

        <div class="dashed-text-wrapper">
          <span class="dashed-line"></span>
          <span class="info-text">Information</span>
          <span class="dashed-line"></span>
        </div>

        <div class="input-group username">
          <input type="text" placeholder="Username" v-model="loginForm.account">
        </div>
        <div class="input-group password">
          <input type="password" placeholder="Password" v-model="loginForm.password">
        </div>

        <button @click="handleLogin" class="login-btn">Log In</button>

      </div>
      
    </div>
    <div class="picture">
      <div class="foot">
        <a href="https://beian.mps.gov.cn/#/query/webSearch">闽ICP备2021012097号-8</a>
      </div>
    </div>
  </div>
</template>

<script setup name="managelogin">
  import { ref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import { useManageStore } from '../../store/manageStore';
  import axios from 'axios';
import { color } from 'echarts';

  const BASE_URL = import.meta.env.VITE_API_URL

  const router = useRouter();
  const manageStore = useManageStore()
  


  // 表单数据
  const loginForm = reactive({
    account: '',
    password: ''
  });

  // 错误信息
  const errors = reactive({
    account: '',
    password: ''
  });

  // 验证表单
  const validateForm = () => {
    let isValid = true;
    let errorMessage = '';
    
    if (!loginForm.account.trim()) {
      errorMessage += 'Please enter your account number\n';
      isValid = false;
    }else if (!loginForm.password.trim()) {
      errorMessage += 'Please enter the password';
      isValid = false;
    }

    if (errorMessage) {
        alert(errorMessage);
    }
    return isValid;
  };

  // 处理登录逻辑
  const handleLogin = async() => {
    if (!validateForm()) return;

    try {
      const res = await axios.post(`${BASE_URL}manage/login`, null, {
        params: {
          account: loginForm.account,
          password: loginForm.password
        }
      });
      
      const resultData = res.data;
      const name = resultData.data.name;
      const dealer = resultData.data.dealer
      const logo = resultData.data.logo
      const auth = resultData.data.auth
      const userId = resultData.data.userId
      const account = resultData.data.account
      if (resultData.code === 0) {
        manageStore.setManageInfo(name,dealer,logo,auth,userId,account)
        router.push('/manage')
        ElMessage.success('Login successfully');
      } else {
        ElMessage.error('The account or password is incorrect.');
      }
    } catch(error) {
      ElMessage.error(error);
    }
  };

</script>

<style scoped>
  .parent {
    display: flex;
    width: 100vw;/*1900px*/
    height: 100vh;/*950px */
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
  }
  .operation {
    width: 46%;
    height: 100%;
    box-sizing: border-box; /* 确保padding不增加总宽度 */
    align-items: center;
    justify-content: center; 
  }
  .picture {
    width: 54%;
    height: 100%;
    box-sizing: border-box; /* 确保padding不增加总宽度 */
    background-image: url('../../assets/images/manage_Login.png');
     background-size: cover; /* 图片覆盖整个容器，保持比例 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中显示 */
    .foot {
      text-align: center;
      font-size: 1.2vw;
      margin-top: 85%;
      a {
        color: #033492;
      }
    }
  }
  
  .login-logo {
    height: 3%;
    width: 32%;
    margin: 8.1% 0 0 8.3%;
  }

  .user-login {
    display: flex;
    flex-direction: column; /* 改为垂直排列 */
    align-items: center;
    justify-content: center;
    margin-top: 15%;
  }
  .user-login-title {
    font-size: 2.5vw;
  }

  /* 虚线和文字的容器 */
  .dashed-text-wrapper {
    display: flex;
    align-items: center; /* 使虚线和文字垂直对齐 */
    gap: 0.5vw; /* 文字与两侧虚线的间距 */
    width: 55%;
    margin-top: -4%;
    margin-bottom: 5%;
  }
  /* 虚线样式 */
  .dashed-line {
    flex: 1; /* 两个虚线平均分配剩余空间 */
    border-top: 0.1vw dashed #718096; /* 虚线样式，可调整粗细和颜色 */
  }
  /* 文字样式 */
  .info-text {
    font-size: 0.9vw;
    color: #718096;
  }

  .input-group {
    width: 55%;
    position: relative;
    border: 0.1vw dashed #718096; /* 虚线边框，模拟设计稿 */
    padding-left: 1.5vw; /* 给图标预留空间 */
    /* padding-right: 1.5vw; */
    box-sizing: border-box;
    margin-bottom: 3%;
    border-radius: 0.4vw;
  }
  /* 输入框通用样式 */
  .input-group input {
    width: 80%;
    padding: 3% 6%;
    border: none;
    outline: none;
    font-size: 0.9vw;
    background: transparent;
  }
  /* 图标样式 */
  .input-group::before {
    content: '';
    position: absolute;
    left: 1vw;
    transform: translateY(-50%);
    width: 1.3vw;
    height: 1.3vw;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .username::before {
    background-image: url('../../assets/images/manage_loginuser.png');
    top:53%;
  }
  .password::before {
    background-image: url('../../assets/images/manage_loginPwd.png');
    top: 49%;
  }
  .error-message {
    color: red;
    display: block;
  }
  .login-btn {
    width: 55%;
    height: 5vh;
    font-size: 1vw;
    background-color: #033492;
    border: none;
    color: white;
    border-radius: 0.4vw;
    margin-top: 1%;
  }
</style>